<template>
  <div class="Table-page" ref="table">
    <el-table :data="tableData" :header-cell-style="{color: 'black'}" stripe border v-loading="tableLoding"
      :max-height="tableHight" style="width: 100%; font-size:14px;" size="small" :span-method="ObjectSpanMethod">
      <el-table-column prop="proxy_id" label="机构号" width="130" label-position="center" align="center" />
      <el-table-column prop="proxy_name" label="机构名称" align="center" min-width="150" />
      <el-table-column prop="proxy" label="机构归属" align="center" min-width="140" />
      <el-table-column prop="sub_time" label="日期" align="center" :formatter="formatterTime" width="160">
      </el-table-column>
      <el-table-column :label="changeTimeDay(searchDatas.start_time,1)+'至'+changeTimeDay(searchDatas.end_time,1)"
        align="center">
        <el-table-column label="整体交易情况" align="center">
          <el-table-column prop="people" label="结存商户" align="center" width="100" :render-header="renderHeader" />
          <el-table-column prop="total_day_count" label="交易金额" width="140" align="center" />
          <el-table-column prop="total_day_money" label="交易笔数" width="130" align="center" />
          <el-table-column prop="total_day_money" label="单日笔均（元）" width="140" align="center"
            :render-header="renderHeader" />
        </el-table-column>
        <el-table-column label="机构商户交易渠道金额占比情况" align="center">
          <el-table-column prop="total_day_count" label="微信交易占比" width="130" align="center"
            :render-header="renderHeader" />
          <el-table-column prop="total_day_num" label="支付宝交易占比" width="140" align="center"
            :render-header="renderHeader" />
          <el-table-column prop="total_day_money" label="云闪付交易占比" width="140" align="center"
            :render-header="renderHeader" />
          <el-table-column prop="total_day_num" label="信用卡交易占比" width="140" align="center"
            :render-header="renderHeader" />
        </el-table-column>
        <el-table-column label="微信交易情况" align="center">
          <el-table-column prop="total_day_count" label="交易金额" width="100" align="center" />
          <el-table-column prop="total_day_num" label="交易笔数" width="140" align="center" />
          <el-table-column prop="total_day_money" label="单日笔均（元）" width="140" align="center"
            :render-header="renderHeader" />
        </el-table-column>
        <el-table-column label="支付宝交易情况" align="center">
          <el-table-column prop="total_day_count" label="交易金额" width="100" align="center" />
          <el-table-column prop="total_day_num" label="交易笔数" width="140" align="center" />
          <el-table-column prop="total_day_money" label="单日笔均（元）" width="140" align="center"
            :render-header="renderHeader" />
        </el-table-column>
        <el-table-column label="云闪付交易情况" align="center">
          <el-table-column prop="total_day_count" label="交易金额" width="100" align="center" />
          <el-table-column prop="total_day_num" label="交易笔数" width="140" align="center" />
          <el-table-column prop="total_day_money" label="单日笔均（元）" width="140" align="center"
            :render-header="renderHeader" />
        </el-table-column>
        <el-table-column label="信用卡交易情况" align="center" :render-header="renderHeader">
          <el-table-column prop="total_day_count" label="交易金额" width="100" align="center" />
          <el-table-column prop="total_day_num" label="交易笔数" width="140" align="center" />
          <el-table-column prop="total_day_money" label="单日笔均（元）" width="140" align="center"
            :render-header="renderHeader" />
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  // import tabletext from '@/utils/tabletext.js'     //可以不引入
  export default {
    // mixins: [tabletext],
    components: {
    },
    props: {
      searchDatas: {
        type: Object,
        default: function () {
          return {
            business_no: '',
            updateState: 0,
            start_time: new Date().getTime() - 24 * 3600 * 1000 * 7,
            end_time: new Date().getTime()
          }
        }
      },
      tableData: {
        type: Array,
        default: function () {
          return [{
            proxy_id: '10215',
            sub_time: new Date().getTime(),
            proxy_name: '四九八天府网点',
            proxy: '福建邮政',
            people: '600',
            total_day_num: '600',
            total_day_money_rate: '5',
            total_day_money: '89898',
            total_day_count: '523',
            tongdao_name: '微信',
            pay_type: '微信',
            trade_money: '100',
            trade_num: '151',
            refund_money: '1000',
            member_hexiao_money: '120',
            rate_money: '1211',
            real_money: '200',
            memo: 'memo',
            trade_no: '2512541254125145',
            subsidies_money: '123123'
          }, {
            proxy_id: '10215',
            sub_time: new Date().getTime(),
            proxy_name: '四九八天府网点',
            proxy: '福建邮政',
            people: '600',
            total_day_num: '600',
            total_day_money_rate: '5',
            total_day_money: '89898',
            total_day_count: '523',
            tongdao_name: '微信',
            pay_type: '微信',
            trade_money: '100',
            trade_num: '151',
            refund_money: '1000',
            member_hexiao_money: '120',
            rate_money: '1211',
            real_money: '200',
            memo: 'memo',
            trade_no: '2512541254125145',
            subsidies_money: '123123'
          }, {
            proxy_id: '10215',
            sub_time: new Date().getTime(),
            proxy_name: '四九八天府网点',
            proxy: '福建邮政',
            people: '600',
            total_day_num: '600',
            total_day_money_rate: '5',
            total_day_money: '89898',
            total_day_count: '523',
            tongdao_name: '微信',
            pay_type: '微信',
            trade_money: '100',
            trade_num: '151',
            refund_money: '1000',
            member_hexiao_money: '120',
            rate_money: '1211',
            real_money: '200',
            memo: 'memo',
            trade_no: '2512541254125145',
            subsidies_money: '123123'
          }, {
            proxy_id: '10214',
            sub_time: new Date().getTime(),
            proxy_name: '四九八天天网点',
            proxy: '福建邮政',
            people: '600',
            total_day_num: '6593',
            total_day_money_rate: '5',
            total_day_money: '252223',
            total_day_count: '23652',
            tongdao_name: '微信',
            pay_type: '微信',
            trade_money: '100',
            trade_num: '151',
            refund_money: '1000',
            member_hexiao_money: '120',
            rate_money: '1211',
            real_money: '200',
            memo: 'memo',
            trade_no: '2512541254125145',
            subsidies_money: '123123'
          }, {
            sub_time: new Date().getTime(),
            proxy_id: '机构合计',
            proxy_name: '',
            total_day_num: '-',
            people: '1200',
            total_day_money_rate: '10',
            total_day_money: '8000',
            total_day_count: '23652',
            tongdao_name: '微信',
            pay_type: '微信',
            trade_money: '100',
            trade_num: '151',
            refund_money: '1000',
            member_hexiao_money: '120',
            rate_money: '1211',
            real_money: '200',
            memo: 'memo',
            trade_no: '2512541254125145',
            subsidies_money: '123123'
          }]
        }
      }
    },
    data() {
      return {
      }
    },
    created() {
      this.getSpanArr(this.tableData)
    },
    methods: {
      // label的提示
      renderHeader(h, { column }) {
        const paymentContent = [h(
          'div',
          {
            slot: 'content'
          },
          '结存商户：截至筛选时间最后一日的转介成功商户'
        )];
        const ZFBWX = [h(
          'div',
          {
            slot: 'content'
          },
          '该类型交易/总交易金额'
        )];
        const dayMoney = [h(
          'div',
          {
            slot: 'content'
          },
          '单笔日均（元）：平均每笔交易金额'
        )];
        const XYK = [h(
          'div',
          {
            slot: 'content'
          },
          '信用卡交易占比：信用卡（含微信、支付宝、云闪付）交易/总交易金额'
        )];
        const XYKJY = [h(
          'div',
          {
            slot: 'content'
          },
          '信用卡交易情况：信用卡交易数据/总交易数据'
        )];
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                placement: 'bottom'
              }
            },
            [
              column.label == '结存商户' ? paymentContent : column.label == '单日笔均（元）' ? dayMoney : column.label == '信用卡交易情况' ? XYKJY : (column.label.indexOf('交易占比') !== -1 && column.label !== '信用卡交易占比') ? ZFBWX : XYK,
              h('i', {
                class: 'el-icon-question',
                style: 'color:black;margin-left:5px;'
              })
            ]
          )
        ])
      },
      // 处理要合并相同行的列
      getSpanArr(data) {
        this.spanArr = []
        this.spanCodeArr = []
        this.spanProxyArr = []
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            // 如果是第一条记录（即索引是0的时候），向数组中加入１
            this.spanArr.push(1)
            this.spanCodeArr.push(1);
            this.spanProxyArr.push(1);
            this.pos = 0
            this.codePos = 0
            this.proxyPos = 0
          } else {
            // 相同机构号
            if (data[i].proxy_id === data[i - 1].proxy_id) {
              // 如果areaName相等就累加，并且push 0
              this.spanArr[this.pos] += 1
              this.spanArr.push(0)
            } else {
              // 不相等push 1
              this.spanArr.push(1)
              this.pos = i
            }
            // 相同机构名称
            if (data[i].proxy_name === data[i - 1].proxy_name) {
              // 如果deptCode相等就累加，并且push 0
              this.spanCodeArr[this.codePos] += 1
              this.spanCodeArr.push(0)
            } else {
              // 不相等push 1
              this.spanCodeArr.push(1)
              this.codePos = i
            }
            // 相同机构归属
            if (data[i].proxy === data[i - 1].proxy) {
              // 如果deptCode相等就累加，并且push 0
              this.spanProxyArr[this.proxyPos] += 1
              this.spanProxyArr.push(0)
            } else {
              // 不相等push 1
              this.spanProxyArr.push(1)
              this.proxyPos = i
            }

          }
        }
      },
      ObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
        // 合并相同列数据的行
        if (columnIndex == 0 && rowIndex !== this.tableData.length - 1) {
          const _row = this.spanArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        // 合并相同列数据的行
        if (columnIndex == 1 && rowIndex !== this.tableData.length - 1) {
          const _row = this.spanCodeArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        // 合并相同列数据的行
        if (columnIndex == 2 && rowIndex !== this.tableData.length - 1) {
          const _row = this.spanProxyArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        // 将最后一行进行合并列弄成总计
        if (rowIndex == this.tableData.length - 1 && columnIndex == 0) {
          return [1, 4]
        }
        // 把第二列、第三列、第四列的列改为0（不占列）
        if (rowIndex == this.tableData.length - 1 && (columnIndex == 1 || columnIndex == 2 || columnIndex == 3)) {
          return [0, 0]
        }
      }
    }
  }
</script>

<style scoped>

</style>